/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
function crearClientes(){
    var theme = getDemoTheme();
    $('#ventanaCliente').show();

    $("#guardarCli").jqxButton({
        theme: theme
    });
    $("#guardarCli").show();
    $("#modificandoCli").hide();
    $('#ventanaCliente').jqxWindow({
        title: 'Guardar Cliente', 
        maxHeight: 1250, 
        maxWidth:500, 
        minHeight: 200, 
        minWidth: 200, 
        height: 300, 
        width: 400,
        theme: theme, 
        resizable: false, 
        isModal: true, 
        modalOpacity: 0.3, 
        autoOpen: false,
        showCloseButton: true, 
        showCollapseButton: true
    });
 
    $('#ventanaCliente').jqxWindow('open');    
 

}
function guardarClientes(){
    if($("#cedulaCliente").val()=='' ||  $("#nombreCliente").val()==''){
        alert('Agregar una cedula y un nombre');
    
    }else{
        var myURL='http://localhost:8080/RestfullServices/rest/cliente';
        $.ajax({
            url: myURL,
            type: 'POST',
            datatype: 'json',
            data: {
                cedula: $("#cedulaCliente").val(), 
                nombre: $("#nombreCliente").val(),
                direccion: $("#direccionCliente").val(),
                apellido: $("#apellidoCliente").val(),
                telefono: $("#telefonoCliente").val()
            },
            success: function(result) {
                if (result=="0"){
                    $("#nombreCliente").val('');
                    $("#apellidoCliente").val('');
                    $("#cedulaCliente").val('');
                    $("#telefonoCliente").val('');
                    $('#direccionCliente').val('');
                    //alert('Operacion exitosa'); 
                    $("#main").jqxGrid('upstringbounddata');
                //$('#dialogoCliente').jqxWindow('hide');
                //$("#avisosCliente").text("Operacion Realizada con exito");
                }else{
                    alert('La operacion fallo');	
                }

            }
        });  
        $('#ventanaCliente').jqxWindow('close');    

    }

}

function modificarClientes(){
    var theme = getDemoTheme();
    $("#guardarCli").hide();
    $("#modificandoCli").show();
    if($('#main').jqxGrid('getselectedrowindex') != -1){
        var datosCliente = $("#main").jqxGrid('getrowdata', $('#main').jqxGrid('getselectedrowindex'));

        $("#nombreCliente").val(datosCliente.nombre);
        $("#apellidoCliente").val(datosCliente.apellido);
        $("#cedulaCliente").val(datosCliente.cedula);
        $("#telefonoCliente").val(datosCliente.telefono);
        $('#direccionCliente').val(datosCliente.direccion);

        $('#ventanaCliente').show();
        $("#modificandoCli").jqxButton({
            theme: theme
        });
        $('#ventanaCliente').jqxWindow({
            title: 'Modificar Cliente', 
            maxHeight: 1250, 
            maxWidth:500, 
            minHeight: 200, 
            minWidth: 200, 
            height: 300, 
            width: 400,
            theme: theme, 
            resizable: false, 
            isModal: true, 
            modalOpacity: 0.3, 
            autoOpen: false,
            showCloseButton: true, 
            showCollapseButton: true
        });

        $('#ventanaCliente').jqxWindow('open');    
    }else{
        alert("Debe seleccionar un Cliente para modificar");
    }
}
         
function modificandoCliente(){
    var datosCliente = $("#main").jqxGrid('getrowdata', $('#main').jqxGrid('getselectedrowindex'));
    var url= 'http://localhost:8080/RestfullServices/rest/cliente/'+datosCliente.id;

    $.ajax(
    {
        type: "PUT",
        url: url,
        data: {
            cedula: $("#cedulaCliente").val(), 
            nombre: $("#nombreCliente").val(),
            direccion: $("#direccionCliente").val(),
            apellido: $("#apellidoCliente").val(),
            telefono: $("#telefonoCliente").val()
        },
        success: function(result) {
            if (result=="0"){
                $("#nombreCliente").val('');
                $("#apellidoCliente").val('');
                $("#cedulaCliente").val('');
                $("#telefonoCliente").val('');
                $('#direccionCliente').val('');
                //alert('Operacion exitosa'); 
                $("#main").jqxGrid('upstringbounddata');
            //$('#dialogoCliente').jqxWindow('hide');
            //$("#avisosCliente").text("Operacion Realizada con exito");
            }else{
                alert('La operacion fallo');	
            }

        }

    });
    $('#ventanaCliente').jqxWindow('close');    

}
function crearProductos(){
    var theme = getDemoTheme();
    $('#ventanaProducto').show();

    $("#guardarPro").jqxButton({
        theme: theme
    });
    $('#ventanaProducto').jqxWindow({
        title: 'Guardar Producto', 
        maxHeight: 1250, 
        maxWidth:500, 
        minHeight: 200, 
        minWidth: 200, 
        height: 300, 
        width: 400,
        theme: theme, 
        resizable: false, 
        isModal: true, 
        modalOpacity: 0.3, 
        autoOpen: false,
        showCloseButton: true, 
        showCollapseButton: true
    });
 
    $('#ventanaProducto').jqxWindow('open');    
 

}
function guardarProductos(){
    if($("#codigoProducto").val()=='' ||  $("#nombreProducto").val()==''){
        alert('Agregar un codigo y un nombre');
    
    }else{
        var myURL='http://localhost:8080/RestfullServices/rest/producto';
        $.ajax({
            url: myURL,
            type: 'POST',
            datatype: 'json',
            data: {
                codigo: $("#codigoProducto").val(), 
                nombre: $("#nombreProducto").val(),
                descripcion: $("#descripcionProducto").val(),
                precio: $("#precioProducto").val(),
                costo: $("#costoProducto").val(),
                existencia: $("#existenciaProducto").val()
            },
            success: function(result) {
                if (result=="0"){
                    $("#codigoProducto").val('');
                    $("#nombreProducto").val('');
                    $("#descripcionProducto").val('');
                    $("#precioProducto").val('');
                    $('#costoProducto').val('');
                    $("#existenciaProducto").val('');
                    //alert('Operacion exitosa'); 
                    $("#main").jqxGrid('upstringbounddata');
                //$('#dialogoCliente').jqxWindow('hide');
                //$("#avisosCliente").text("Operacion Realizada con exito");
                }else{
                    alert('La operacion fallo');	
                }

            }
        });  
        $('#ventanaProducto').jqxWindow('close');    

    }

}

function eliminarClientes(){
    try
    {        
        if($('#main').jqxGrid('getselectedrowindex') != -1){
            //alert("entrro"+$('#main').jqxGrid('getselectedrowindex')+"Ed");
            var datosCliente = $("#main").jqxGrid('getrowdata', $('#main').jqxGrid('getselectedrowindex'));
            var url= 'http://localhost:8080/RestfullServices/rest/cliente/'+datosCliente.id;
            $.ajax(
            {
                type: "DELETE",
                url: url,
                //data: {nombre: $("#nombre").val() ,apellido: $("#apellido").val(),cedula: $("#cedula").val()},
                success: function(result) {
                    if (result=="0"){
                        $("#main").jqxGrid('upstringbounddata');
                    }else{
                        $("#error").text("Error en la operacion");
                    }

                }
            });
        }else{
            alert("Debe seleccionar un Cliente para eliminar");
        }
    }
    catch(ex)
    {
        alert(ex.description);
    }
}

function eliminarProductos(){
    try
    {        
        if($('#main').jqxGrid('getselectedrowindex') != -1){
            //alert("entrro"+$('#main').jqxGrid('getselectedrowindex')+"Ed");
            var datosProducto = $("#main").jqxGrid('getrowdata', $('#main').jqxGrid('getselectedrowindex'));
            var url= 'http://localhost:8080/RestfullServices/rest/producto/'+datosProducto.id;
            $.ajax(
            {
                type: "DELETE",
                url: url,
                success: function(result) {
                    if (result=="0"){
                        $("#main").jqxGrid('upstringbounddata');
                    }else{
                        $("#error").text("Error en la operacion");
                    }

                }
            });
        }else{
            alert("Debe seleccionar un Producto para eliminar");
        }
    }
    catch(ex)
    {
        alert(ex.description);
    }
}

function eliminarVentas(){
    try
    {        
        if($('#main').jqxGrid('getselectedrowindex') != -1){
            //alert("entrro"+$('#main').jqxGrid('getselectedrowindex')+"Ed");
            var datosVenta = $("#main").jqxGrid('getrowdata', $('#main').jqxGrid('getselectedrowindex'));
            var url= 'http://localhost:8080/RestfullServices/rest/venta/'+datosVenta.id;
            $.ajax(
            {
                type: "DELETE",
                url: url,
                success: function(result) {
                    if (result=="0"){
                        $("#main").jqxGrid('upstringbounddata');
                    }else{
                        $("#error").text("Error en la operacion");
                    }

                }
            });
        }else{
            alert("Debe seleccionar un Venta para eliminar");
        }
    }
    catch(ex)
    {
        alert(ex.description);
    }
}

function eliminarPagos(){
    try
    {        
        if($('#main').jqxGrid('getselectedrowindex') != -1){
            //alert("entrro"+$('#main').jqxGrid('getselectedrowindex')+"Ed");
            var datosPago = $("#main").jqxGrid('getrowdata', $('#main').jqxGrid('getselectedrowindex'));
            var url= 'http://localhost:8080/RestfullServices/rest/pago/'+datosPago.id;
            $.ajax(
            {
                type: "DELETE",
                url: url,
                success: function(result) {
                    if (result=="0"){
                        $("#main").jqxGrid('upstringbounddata');
                    }else{
                        $("#error").text("Error en la operacion");
                    }

                }
            });
        }else{
            alert("Debe seleccionar un Pago para eliminar");
        }
    }
    catch(ex)
    {
        alert(ex.description);
    }
}

function listarClientes() {
    var theme = getDemoTheme();
    $("#botonesVenta").hide();
    $("#botonesProducto").hide();
    $("#botonesPago").hide();
    
    $("#botonesCliente").show();		
    $("#crearCliente").jqxButton({
        theme: theme
    });		
    $("#modificarCliente").jqxButton({
        theme: theme
    });		
    $("#eliminarCliente").jqxButton({
        theme: theme
    });
    var source =
    {
                
        datafields:
        [
        {
            name: 'id',
            type: 'number'
        },
        {
            name: 'nombre',
            type: 'string'
        },
        {
            name: 'apellido',
            type: 'string'
        },
        {
            name: 'cedula',
            type: 'string'
        },
        {
            name: 'direccion',
            type: 'string'
        },
        {
            name: 'telefono',
            type: 'string'
        }
        ],
        datatype: 'json',
        url: 'http://localhost:8080/RestfullServices/rest/clientes'
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    var self = this;


    $("#main").jqxGrid(
    {
        width: '80%',
        source: dataAdapter,
        pageable: true,
        pagerrenderer: pagerrenderer,
        theme: theme,
        filterable: true,
        showfilterrow: true,
        autoheight: true,
        selectionmode: 'singlerow',
        columns: [
        {
            text: 'Id',
            hidden: true,
            columntype: 'textbox',
            datafield: 'id',
            width: '5%'
        },
        {
            text: 'Nombre',
            columntype: 'textbox',
            type: 'string',
            datafield: 'nombre',
            width: '20%'
        },
        {
            text: 'Apellido',
            columntype: 'textbox',
            type: 'string',
            datafield: 'apellido',
            width: '20%'
        },
        {
            text: 'Cedula',
            columntype: 'textbox',
            type: 'string',
            datafield: 'cedula',
            width: '15%'
        },
        {
            text: 'Direccion',
            columntype: 'textbox',
            type: 'string',
            datafield: 'direccion',
            width: '30%'
        },
        {
            text: 'Telefono',
            columntype: 'textbox',
            type: 'string',
            datafield: 'telefono',
            width: '15%'
        }
        ]
    });
    $("#main").on('rowselect', function(event) {
        $("#selectrowindex").text(event.args.rowindex);
    });
    var pagerrenderer = function() {
        var element = $("<div style='margin-left: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>");
        var datainfo = $("#main").jqxGrid('getdatainformation');
        var paginginfo = datainfo.paginginformation;

        var leftButton = $("<div style='padding: 0px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        leftButton.find('div').addClass('jqx-icon-arrow-left');
        leftButton.width(36);
        leftButton.jqxButton({
            theme: theme
        });

        var rightButton = $("<div style='padding: 0px; margin: 0px 3px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        rightButton.find('div').addClass('jqx-icon-arrow-right');
        rightButton.width(36);
        rightButton.jqxButton({
            theme: theme
        });

        leftButton.appendTo(element);
        rightButton.appendTo(element);

        var label = $("<div style='font-size: 11px; margin: 2px 3px; font-weight: bold; float: left;'></div>");
        label.text("1-" + paginginfo.pagesize + ' of ' + datainfo.rowscount);
        label.appendTo(element);
        self.label = label;
        // upstring buttons states.
        var handleStates = function(event, button, className, add) {
            button.on(event, function() {
                if (add == true) {
                    button.find('div').addClass(className);
                }
                else
                    button.find('div').removeClass(className);
            });
        }

        if (theme != '') {
            handleStates('mousedown', rightButton, 'jqx-icon-arrow-right-selected-' + theme, true);
            handleStates('mouseup', rightButton, 'jqx-icon-arrow-right-selected-' + theme, false);
            handleStates('mousedown', leftButton, 'jqx-icon-arrow-left-selected-' + theme, true);
            handleStates('mouseup', leftButton, 'jqx-icon-arrow-left-selected-' + theme, false);

            handleStates('mouseenter', rightButton, 'jqx-icon-arrow-right-hover-' + theme, true);
            handleStates('mouseleave', rightButton, 'jqx-icon-arrow-right-hover-' + theme, false);
            handleStates('mouseenter', leftButton, 'jqx-icon-arrow-left-hover-' + theme, true);
            handleStates('mouseleave', leftButton, 'jqx-icon-arrow-left-hover-' + theme, false);
        }

        rightButton.click(function() {
            $("#main").jqxGrid('gotonextpage');
        });

        leftButton.click(function() {
            $("#main").jqxGrid('gotoprevpage');
        });

        return element;
    }

    $("#main").on('pagechanged', function() {
        var datainfo = $("#main").jqxGrid('getdatainformation');
        var paginginfo = datainfo.paginginformation;
        self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + "-" + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ' of ' + datainfo.rowscount);
    });
}
function listarProductos() {
    var theme = getDemoTheme();
    
    $("#botonesVenta").hide();
    $("#botonesCliente").hide();
    $("#botonesPago").hide();
    
    $("#botonesProducto").show();		
    $("#crearProducto").jqxButton({
        theme: theme
    });		
    $("#modificarProducto").jqxButton({
        theme: theme
    });		
    $("#eliminarProducto").jqxButton({
        theme: theme
    });
    var source =
    {
                
        datafields:
        [
        {
            name: 'id',
            type: 'number'
        },
        {
            name: 'codigo',
            type: 'string'
        },
        {
            name: 'nombre',
            type: 'string'
        },
        {
            name: 'descripcion',
            type: 'string'
        },
        {
            name: 'costo',
            type: 'number'
        },
        {
            name: 'precio',
            type: 'number'
        },
        {
            name: 'existencia',
            type: 'number'
        }
        ],
        datatype: 'json',
        url: 'http://localhost:8080/RestfullServices/rest/productos'
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    var self = this;


    $("#main").jqxGrid(
    {
        width: '100%',
        autoheight: true,
        source: dataAdapter,
        pageable: true,
        filterable: true,
        showfilterrow: true,
        pagerrenderer: pagerrenderer,
        theme: theme,
        selectionmode: 'singlerow',
        columns: [
        {
            text: 'Id',
            hidden: true, 
            columntype: 'textbox',
            datafield: 'id',
            width: '5%'
        },
        {
            text: 'Codigo',
            columntype: 'textbox',
            type: 'string',
            datafield: 'codigo',
            width: '15%'
        },
        {
            text: 'Nombre',
            columntype: 'textbox',
            type: 'string',
            datafield: 'nombre',
            width: '20%'
        },
        {
            text: 'Descripcion',
            columntype: 'textbox',
            type: 'string',
            datafield: 'descripcion',
            width: '20%'
        },
        {
            text: 'Costo',
            columntype: 'textbox',
            type: 'string',
            datafield: 'costo',
            width: '15%'
        },
        {
            text: 'Precio',
            columntype: 'textbox',
            type: 'string',
            datafield: 'precio',
            width: '15%'
        },
        {
            text: 'Existencia',
            columntype: 'textbox',
            type: 'string',
            datafield: 'existencia',
            width: '20%'
        }
        ]
    });
    $("#main").on('rowselect', function(event) {
        $("#selectrowindex").text(event.args.rowindex);
    });
    var pagerrenderer = function() {
        var element = $("<div style='margin-left: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>");
        var datainfo = $("#main").jqxGrid('getdatainformation');
        var paginginfo = datainfo.paginginformation;

        var leftButton = $("<div style='padding: 0px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        leftButton.find('div').addClass('jqx-icon-arrow-left');
        leftButton.width(36);
        leftButton.jqxButton({
            theme: theme
        });

        var rightButton = $("<div style='padding: 0px; margin: 0px 3px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        rightButton.find('div').addClass('jqx-icon-arrow-right');
        rightButton.width(36);
        rightButton.jqxButton({
            theme: theme
        });

        leftButton.appendTo(element);
        rightButton.appendTo(element);

        var label = $("<div style='font-size: 11px; margin: 2px 3px; font-weight: bold; float: left;'></div>");
        label.text("1-" + paginginfo.pagesize + ' of ' + datainfo.rowscount);
        label.appendTo(element);
        self.label = label;
        // upstring buttons states.
        var handleStates = function(event, button, className, add) {
            button.on(event, function() {
                if (add == true) {
                    button.find('div').addClass(className);
                }
                else
                    button.find('div').removeClass(className);
            });
        }

        if (theme != '') {
            handleStates('mousedown', rightButton, 'jqx-icon-arrow-right-selected-' + theme, true);
            handleStates('mouseup', rightButton, 'jqx-icon-arrow-right-selected-' + theme, false);
            handleStates('mousedown', leftButton, 'jqx-icon-arrow-left-selected-' + theme, true);
            handleStates('mouseup', leftButton, 'jqx-icon-arrow-left-selected-' + theme, false);

            handleStates('mouseenter', rightButton, 'jqx-icon-arrow-right-hover-' + theme, true);
            handleStates('mouseleave', rightButton, 'jqx-icon-arrow-right-hover-' + theme, false);
            handleStates('mouseenter', leftButton, 'jqx-icon-arrow-left-hover-' + theme, true);
            handleStates('mouseleave', leftButton, 'jqx-icon-arrow-left-hover-' + theme, false);
        }

        rightButton.click(function() {
            $("#main").jqxGrid('gotonextpage');
        });

        leftButton.click(function() {
            $("#main").jqxGrid('gotoprevpage');
        });

        return element;
    }

    $("#main").on('pagechanged', function() {
        var datainfo = $("#main").jqxGrid('getdatainformation');
        var paginginfo = datainfo.paginginformation;
        self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + "-" + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ' of ' + datainfo.rowscount);
    });
}
function listarVentas() {
    var theme = getDemoTheme();
    
    $("#botonesCliente").hide();
    $("#botonesProducto").hide();
    $("#botonesPago").hide();
    
    $("#botonesVenta").show();		
    $("#crearVenta").jqxButton({
        theme: theme
    });		
    $("#modificarVenta").jqxButton({
        theme: theme
    });		
    $("#eliminarVenta").jqxButton({
        theme: theme
    });
    var source =
    {
                
        datafields:
        [
        {
            name: 'id',
            type: 'number'
        },
        {
            name: 'fecha',
            type: 'string'
        },
        {
            name: 'numeroVta',
            type: 'string'
        },
        {
            name: 'total',
            type: 'number'
        },
        {
            name: 'cliente',
            type: 'string'
        }
        ],
        datatype: 'json',
        url: 'http://localhost:8080/RestfullServices/rest/ventas'
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    var self = this;


    $("#main").jqxGrid(
    {
        width: '80%',
        source: dataAdapter,
        pageable: true,
        pagerrenderer: pagerrenderer,
        theme: theme,
        filterable: true,
        showfilterrow: true,
        autoheight: true,
        selectionmode: 'singlerow',
        columns: [
        {
            text: 'Id',
            columntype: 'textbox',
            datafield: 'id',
            width: '5%'
        },
        {
            text: 'Fecha',
            columntype: 'textbox',
            type: 'string',
            datafield: 'fecha',
            width: '30%'
        },
        {
            text: 'Numero Venta',
            columntype: 'textbox',
            type: 'string',
            datafield: 'numeroVta',
            width: '20%'
        },
        {
            text: 'Total',
            columntype: 'textbox',
            type: 'number',
            datafield: 'total',
            width: '15%'
        },
        {
            text: 'Cliente',
            columntype: 'textbox',
            type: 'string',
            datafield: 'cliente',
            width: '30%'
        }
        ]
    });
    $("#main").on('rowselect', function(event) {
        $("#selectrowindex").text(event.args.rowindex);
    });
    var pagerrenderer = function() {
        var element = $("<div style='margin-left: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>");
        var datainfo = $("#main").jqxGrid('getdatainformation');
        var paginginfo = datainfo.paginginformation;

        var leftButton = $("<div style='padding: 0px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        leftButton.find('div').addClass('jqx-icon-arrow-left');
        leftButton.width(36);
        leftButton.jqxButton({
            theme: theme
        });

        var rightButton = $("<div style='padding: 0px; margin: 0px 3px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        rightButton.find('div').addClass('jqx-icon-arrow-right');
        rightButton.width(36);
        rightButton.jqxButton({
            theme: theme
        });

        leftButton.appendTo(element);
        rightButton.appendTo(element);

        var label = $("<div style='font-size: 11px; margin: 2px 3px; font-weight: bold; float: left;'></div>");
        label.text("1-" + paginginfo.pagesize + ' of ' + datainfo.rowscount);
        label.appendTo(element);
        self.label = label;
        // upstring buttons states.
        var handleStates = function(event, button, className, add) {
            button.on(event, function() {
                if (add == true) {
                    button.find('div').addClass(className);
                }
                else
                    button.find('div').removeClass(className);
            });
        }

        if (theme != '') {
            handleStates('mousedown', rightButton, 'jqx-icon-arrow-right-selected-' + theme, true);
            handleStates('mouseup', rightButton, 'jqx-icon-arrow-right-selected-' + theme, false);
            handleStates('mousedown', leftButton, 'jqx-icon-arrow-left-selected-' + theme, true);
            handleStates('mouseup', leftButton, 'jqx-icon-arrow-left-selected-' + theme, false);

            handleStates('mouseenter', rightButton, 'jqx-icon-arrow-right-hover-' + theme, true);
            handleStates('mouseleave', rightButton, 'jqx-icon-arrow-right-hover-' + theme, false);
            handleStates('mouseenter', leftButton, 'jqx-icon-arrow-left-hover-' + theme, true);
            handleStates('mouseleave', leftButton, 'jqx-icon-arrow-left-hover-' + theme, false);
        }

        rightButton.click(function() {
            $("#main").jqxGrid('gotonextpage');
        });

        leftButton.click(function() {
            $("#main").jqxGrid('gotoprevpage');
        });

        return element;
    }

    $("#main").on('pagechanged', function() {
        var datainfo = $("#main").jqxGrid('getdatainformation');
        var paginginfo = datainfo.paginginformation;
        self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + "-" + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ' of ' + datainfo.rowscount);
    });
}
function listarPagos() {
    var theme = getDemoTheme();
    
    $("#botonesVenta").hide();
    $("#botonesProducto").hide();
    $("#botonesCliente").hide();
    
    $("#botonesPago").show();		
    $("#crearPago").jqxButton({
        theme: theme
    });		
    $("#modificarPago").jqxButton({
        theme: theme
    });		
    $("#eliminarPago").jqxButton({
        theme: theme
    });
    var source =
    {
                
        datafields:
        [
        {
            name: 'id',
            type: 'number'
        },
        {
            name: 'fecha',
            type: 'string'
        },

        {
            name: 'numeroVta',
            type: 'string'
        },
        {
            name: 'numeroPago',
            type: 'string'
        },
   
        {
            name: 'totalVta',
            type: 'number'
        },
        {
            name: 'monto',
            type: 'number'
        }
        ],
        datatype: 'json',
        url: 'http://localhost:8080/RestfullServices/rest/pagos'
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    var self = this;


    $("#main").jqxGrid(
    {
        width: '80%',
        source: dataAdapter,
        pageable: true,
        pagerrenderer: pagerrenderer,
        theme: theme,
        filterable: true,
        showfilterrow: true,
        autoheight: true, 
        selectionmode: 'singlerow',
        columns: [
        {
            text: 'Id',
            columntype: 'textbox',
            datafield: 'id',
            width: '5%'
        },
        {
            text: 'Fecha',
            columntype: 'textbox',
            type: 'string',
            datafield: 'fecha',
            width: '30%'
        },
        {
            text: 'Numero Venta',
            columntype: 'textbox',
            type: 'string',
            datafield: 'numeroVta',
            width: '20%'
        },
        {
            text: 'Numero Pago',
            columntype: 'textbox',
            type: 'string',
            datafield: 'numeroPago',
            width: '20%'
        },
        {
            text: 'Total Venta',
            columntype: 'textbox',
            type: 'string',
            datafield: 'totalVta',
            width: '20%'
        },
        {
            text: 'Monto',
            columntype: 'textbox',
            type: 'string',
            datafield: 'monto',
            width: '20%'
        }
        ]
    });
    $("#main").on('rowselect', function(event) {
        $("#selectrowindex").text(event.args.rowindex);
    });
    var pagerrenderer = function() {
        var element = $("<div style='margin-left: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>");
        var datainfo = $("#main").jqxGrid('getdatainformation');
        var paginginfo = datainfo.paginginformation;

        var leftButton = $("<div style='padding: 0px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        leftButton.find('div').addClass('jqx-icon-arrow-left');
        leftButton.width(36);
        leftButton.jqxButton({
            theme: theme
        });

        var rightButton = $("<div style='padding: 0px; margin: 0px 3px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        rightButton.find('div').addClass('jqx-icon-arrow-right');
        rightButton.width(36);
        rightButton.jqxButton({
            theme: theme
        });

        leftButton.appendTo(element);
        rightButton.appendTo(element);

        var label = $("<div style='font-size: 11px; margin: 2px 3px; font-weight: bold; float: left;'></div>");
        label.text("1-" + paginginfo.pagesize + ' of ' + datainfo.rowscount);
        label.appendTo(element);
        self.label = label;
        // upstring buttons states.
        var handleStates = function(event, button, className, add) {
            button.on(event, function() {
                if (add == true) {
                    button.find('div').addClass(className);
                }
                else
                    button.find('div').removeClass(className);
            });
        }

        if (theme != '') {
            handleStates('mousedown', rightButton, 'jqx-icon-arrow-right-selected-' + theme, true);
            handleStates('mouseup', rightButton, 'jqx-icon-arrow-right-selected-' + theme, false);
            handleStates('mousedown', leftButton, 'jqx-icon-arrow-left-selected-' + theme, true);
            handleStates('mouseup', leftButton, 'jqx-icon-arrow-left-selected-' + theme, false);

            handleStates('mouseenter', rightButton, 'jqx-icon-arrow-right-hover-' + theme, true);
            handleStates('mouseleave', rightButton, 'jqx-icon-arrow-right-hover-' + theme, false);
            handleStates('mouseenter', leftButton, 'jqx-icon-arrow-left-hover-' + theme, true);
            handleStates('mouseleave', leftButton, 'jqx-icon-arrow-left-hover-' + theme, false);
        }

        rightButton.click(function() {
            $("#main").jqxGrid('gotonextpage');
        });

        leftButton.click(function() {
            $("#main").jqxGrid('gotoprevpage');
        });

        return element;
    }

    $("#main").on('pagechanged', function() {
        var datainfo = $("#main").jqxGrid('getdatainformation');
        var paginginfo = datainfo.paginginformation;
        self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + "-" + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ' of ' + datainfo.rowscount);
    });
}

function crearPagos(){
    var theme = getDemoTheme();
    $('#ventanaPago').show();
    $("#guardarPa").jqxButton({
        theme: theme
    });
    var source =
    {
                
        datafields:
        [
        {
            name: 'id',
            type: 'number'
        },
        {
            name: 'fecha',
            type: 'string'
        },
        {
            name: 'numeroVta',
            type: 'string'
        },
        {
            name: 'total',
            type: 'number'
        },
        {
            name: 'cliente',
            type: 'string'
        }
        ],
        datatype: 'json',
        url: 'http://localhost:8080/RestfullServices/rest/ventas'
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#venta").jqxComboBox({selectedIndex: 2, source: dataAdapter, displayMember: "numeroVta", valueMember: "numeroVta", width: 150, theme: theme, disabled:false});
    document.getElementById('numeroPago').readOnly = false;
    $("#guardarPa").show();
    $("#modificandoPa").hide();
    $('#ventanaPago').jqxWindow({
        title: 'Guardar Pago', 
        maxHeight: 1250, 
        maxWidth:500, 
        minHeight: 200, 
        minWidth: 200, 
        height: 300, 
        width: 400,
        theme: theme, 
        resizable: false, 
        isModal: true, 
        modalOpacity: 0.3, 
        autoOpen: false,
        showCloseButton: true, 
        showCollapseButton: true
    });
     

    $('#ventanaPago').jqxWindow('open');    
 

}
function guardarPagos(){
    if($("#numeroPago").val()=='' ||  $("#venta").val()==''){
        alert('Agregar un  numero de pago y un numero de factura');
    
    }else{
        var myURL='http://localhost:8080/RestfullServices/rest/pago';
        $.ajax({
            url: myURL,
            type: 'POST',
            datatype: 'json',
            data: {
                fecha: $("#fecha").val(), 
                numeroPago: $("#numeroPago").val(),
                numeroVenta: $("#venta").val(),
                monto: $("#monto").val()
                },
            success: function(result) {
                if (result=="0"){
                    $("#fecha").val('');
                    $("#numeroPago").val('');
                    $("#venta").val('');
                    $("#monto").val('');
                    //alert('Operacion exitosa'); 
                    $("#main").jqxGrid('upstringbounddata');
                //$('#dialogoCliente').jqxWindow('hide');
                //$("#avisosCliente").text("Operacion Realizada con exito");
                }else{
                    alert('La operacion fallo');	
                }

            }
        });  
        $('#ventanaPago').jqxWindow('close');    
    }
}

function modificarPagos(){
    var theme = getDemoTheme();
    $("#guardarPa").hide();
    $("#modificandoPa").jqxButton({
        theme: theme
    });
    $("#modificandoPa").show();
    
    if($('#main').jqxGrid('getselectedrowindex') != -1){
        var datosPago = $("#main").jqxGrid('getrowdata', $('#main').jqxGrid('getselectedrowindex'));

        $("#fecha").val(datosPago.fecha);
        $("#numeroPago").val(datosPago.numeroPago);
        document.getElementById('numeroPago').readOnly = true;
        $("#venta").jqxComboBox({selectedIndex: 2, source: datosPago, displayMember: "numeroVenta", valueMember: "numeroVenta", width: 150, theme: theme, disabled:true});
        //$("#venta").val(datosPago.numeroVenta);
        $("#monto").val(datosPago.monto);

        $('#ventanaPago').show();
        $("#modificandoPago").jqxButton({
            theme: theme
        });
        $('#ventanaPago').jqxWindow({
            title: 'Modificar Pago', 
            maxHeight: 1250, 
            maxWidth:500, 
            minHeight: 200, 
            minWidth: 200, 
            height: 300, 
            width: 400,
            theme: theme, 
            resizable: false, 
            isModal: true, 
            modalOpacity: 0.3, 
            autoOpen: false,
            showCloseButton: true, 
            showCollapseButton: true
        });

        $('#ventanaPago').jqxWindow('open');    
    }else{
        alert("Debe seleccionar un Pago para modificar");
    }
}
         
function modificandoPagos(){
    var datosPago = $("#main").jqxGrid('getrowdata', $('#main').jqxGrid('getselectedrowindex'));
    //alert(datosPago.id);
    var url= 'http://localhost:8080/RestfullServices/rest/pago/'+datosPago.id;
    $.ajax(
    {
        type: "PUT",
        url: url,
        data: {
            fecha: $("#fecha").val(), 
            numeroPago: $("#numeroPago").val(),
            numeroVenta: $("#venta").val(),
            monto: $("#monto").val()
        },
        success: function(result) {
            if (result=="0"){
                $("#fecha").val('');
                $("#numeroPago").val('');
                $("#venta").val('');
                $("#monto").val('');
                //alert('Operacion exitosa'); 
                $("#main").jqxGrid('upstringbounddata');
            //$('#dialogoCliente').jqxWindow('hide');
            //$("#avisosCliente").text("Operacion Realizada con exito");
            }else{
                alert('La operacion fallo');	
            }

        }

    });
    $('#ventanaPago').jqxWindow('close');    

}